<template>
  <div class="sec-l3">
    <div class="num-panel">
      <div class="num-ico all-count"></div>
      <p class="num-p-t">
        总人数
        <span class=" font-abl">{{ splitNumber(allPerson) }}</span>
        人
      </p>
    </div>
    <div class="num-panel">
      <div class="num-ico avg-age"></div>
      <p class="num-p-t">
        平均年龄
        <span class=" font-abl" style="font-size:55px;">{{ avgAge }}</span>
        岁
      </p>
    </div>
    <div class="panel">
      <div class="panel-header">学历分布</div>
      <div class="panel-num">
        <div v-for="(item, index) in edu" :key="index">
          <p>{{ item.value }}人</p>
          <p>{{ calcPersent(item.value, edu) }}%</p>
        </div>
      </div>
      <div class="panel-content edu-char" ref="eduChar"></div>
    </div>
    <div class="panel">
      <div class="panel-header">政治面貌</div>
      <div class="panel-content zzmm">
        <div class="zzmm-tal">
          <div
            class="zzmm-t-item"
            v-for="(item, index) in zm"
            :key="index"
            :class="{ ohter: index == 1 }"
          >
            <p class="zzmm-t-t">{{ item.name }}</p>
            <p class="zzmm-t-n font-abl">{{ item.value }}人</p>
          </div>
        </div>
        <div class="zzmm-char" ref="zzmmChar"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { eduChar, commomBar } from '@/utils/chartConfig'
import { mapState } from 'vuex'
import {
  count_all_person_by_b0117_ranks,
  count_avg_age_by_b0117_ranks,
  count_edu_by_b0117_ranks,
  count_zm_by_b0117_ranks,
  count_zm_type_by_b0117,
  count_zm_type_by_b0117_ranks
} from '@/api/common'
export default {
  name: 'secl3',
  computed: {
    ...mapState(['ranks'])
  },
  data() {
    return {
      // 总人数
      allPerson: 0,
      // 平均年龄
      avgAge: 0,
      // 政治面貌
      zzmm: [
        { name: '民革', value: 0 },
        { name: '民盟', value: 0 },
        { name: '民建', value: 0 },
        { name: '民进', value: 0 },
        { name: '农工党', value: 0 },
        { name: '致公党', value: 0 },
        { name: '九三学社', value: 0 },
        { name: '无党派', value: 0 }
      ],
      // 学历分布
      edu: [
        { name: '研究生', value: 0 },
        { name: '研究生2', value: 0 },
        { name: '研究生3', value: 0 },
        { name: '研究生3', value: 0 }
      ],
      zm: [
        { name: '中共党员', value: 0 },
        { name: '非中共党员', value: 0 }
      ]
    }
  },
  created() {
    this.getAgeAndPeople()
  },
  mounted() {
    this.initEdu()
    this.initZzmm()
    this.getEud()
    this.getZzmm()
  },
  watch: {
    '$store.state.ranks': function() {
      this.getEud()
      this.getZzmm()
      this.getAgeAndPeople()
    }
  },
  methods: {
    calcPersent(i, t) {
      if (i == 0) {
        return 0
      }
      let a = 0
      t.forEach(item => {
        a += item.value * 1
      })
      if (t == 0) {
        return 0
      }
      return ((i * 100) / a).toFixed(2)
    },
    // 获取学历数据
    getEud() {
      count_edu_by_b0117_ranks().then(res => {
        this.edu = res.edu
        this.initEdu()
      })
    },
    // 获取政治面貌数据
    getZzmm() {
      //分类数据
      count_zm_by_b0117_ranks().then(res => {
        this.zm = res.zm
      })
      //17图表数据
      count_zm_type_by_b0117().then(res => {
        this.zzmm = res.zmType
      })
      // 政治面貌 中共党员 非中共党员
      count_zm_type_by_b0117_ranks().then(res => {
        this.zzmm = res.zmType
        this.initZzmm()
      })
    },
    // 获取总人数和平均年龄
    getAgeAndPeople() {
      // 14 统计总人数分布
      count_all_person_by_b0117_ranks().then(res => {
        // console.log(res, 'count_all_person_by_b0117_ranks')
        this.allPerson = res.allPerson
      })
      //15 统计平均年龄分布
      count_avg_age_by_b0117_ranks().then(res => {
        this.avgAge = res.avgAge
      })
    },
    // 学历分布图
    initEdu() {
      let x = []
      this.edu.forEach(item => {
        x.push(item.name)
      })
      eduChar(this.$refs.eduChar, x, this.edu)
    },
    // 政治面貌分布图
    initZzmm() {
      let x = []
      this.zzmm.forEach(item => {
        x.push(item.name)
      })
      commomBar(
        this.$refs.zzmmChar,
        x,
        this.zzmm,
        [
          'rgba(197, 225, 166, 1)',
          'rgba(0, 188, 213, 1)',
          'rgba(36, 244, 255, 1)'
        ],
        2,
        {
          left: 80,
          top: 80,
          bottom: 60
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.sec-l3 {
  position: relative;
  width: 592px;
  padding-top: 126px;
  .panel-num {
    display: flex;
    position: absolute;
    top: 10%;
    left: 15%;
    div {
      margin-right: 30px;
      p {
        color: #00ffff;
        font-size: 20px;
        font-family: Arial Black;
        font-weight: bold;
      }
    }
    div:nth-child(2) {
      p {
        color: #00b7ee;
      }
    }
    div:nth-child(3) {
      p {
        color: #ffd200;
      }
    }
    div:nth-child(4) {
      p {
        color: #d6888d;
      }
    }
  }
  .edu-char {
    position: relative;
    height: 560px;
  }
  .zzmm {
    // display: flex;
    // align-items: center;
    height: 600px;
    padding-right: 16px;
    .zzmm-char {
      position: relative;
      flex: 1;
      height: 475px;
    }
    .zzmm-tal {
      // position: relative;
      // width: 148px;
      display: flex;
      margin-top: 20px;
      .zzmm-t-item {
        flex: 1;
        width: 229px;
        height: 111px;
        // background-image: url('~@/assets/images/province/zzmm-bg.png');
        background-image: url('~@/assets/images/province/zzmm-bg-lf.png');
        background-repeat: no-repeat;
        background-position: center;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .zzmm-t-t {
          color: white;
          font-size: 24px;
          height: 18px;
          line-height: 18px;
        }
        .zzmm-t-n {
          color: rgba(255, 212, 8, 1);
          font-size: 24px;
          height: 24px;
          line-height: 24px;
          margin-top: 10px;
        }
        & + .zzmm-t-item {
          .zzmm-t-n {
            color: rgba(222, 255, 191, 1);
          }
        }
      }
      .other {
        background-image: url('~@/assets/images/province/zzmm-bg-rt.png');
        background-repeat: no-repeat;
      }
    }
  }
}
</style>
